 <template>
  <div :style="backgroundImg">
    <div id="bigBox">
      <h1>LOGIN</h1>
      <div class="inputBox">
        <div class="inputText">
          <span class="iconfont el-icon-user-solid"></span>
          <input type="text" v-model="name" placeholder="Username" />
        </div>
        <div class="inputText">
          <span class="iconfont el-icon-key"></span>
          <input type="password" v-model="password" placeholder="Password" />
        </div>
      </div>
      <input
        class="loginButton"
        type="button"
        value="Login"
        @click="intoHome"
      />
    </div>
  </div>
</template>
 <script>
export default {
  data() {
    return {
      backgroundImg: {
        backgroundImage: "url(" + require("../assets/bgimg.jpg") + ")",
        width: "100vw",
        height: "100vh",
        backgoundRepeat: "no-repeat",
        backgroundPosition: "center center",
        backgroundSize: "100% 100%",
        overflow: "hidden",
      },
      name: "admin",
      password: "123456",
    };
  },
  created() {},
  methods: {
    intoHome() {
      this.$http
        .post("v1/login", {
          name: this.name,
          password: this.password,
        })
        .then((res) => {
          if (res.data.code === 1) {
            this.$message.success(res.data.msg);
            this.$router.push("/home");
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
  },
};
</script>

 <style  lang='less' scoped >
#bigBox {
  margin: 0 auto; /* login框剧中 */
  /* login框与顶部的距离 */
  margin-top: 200px;
  padding: 20px 50px; /* login框内部的距离(内部与输入框和按钮的距离) */
  background-color: #00000090; /* login框背景颜色和透明度 */
  width: 400px;
  height: 300px;
  border-radius: 10px; /* 圆角边 */
  text-align: center; /* 框内所有内容剧中 */
}

#bigBox h1 {
  color: white; /* LOGIN字体颜色 */
}

#bigBox .inputBox {
  margin-top: 50px; /* 输入框顶部与LOGIN标题的间距 */
}

#bigBox .inputBox .inputText {
  margin-top: 20px; /* 输入框之间的距离 */
}

#bigBox .inputBox .inputText span {
  color: white; /* icon颜色 */
}

#bigBox .inputBox .inputText input {
  outline: none;
  border: 0; /* 删除输入框边框 */
  padding: 10px 10px; /* 输入框内的间距 */
  border-bottom: 1px solid white; /* 输入框白色下划线 */
  background-color: #00000000; /* 输入框透明 */
  color: white; /* 输入字体的颜色 */
}

#bigBox .loginButton {
  margin-top: 30px; /* 按钮顶部与输入框的距离 */
  width: 150px;
  height: 25px;
  color: white; /* 按钮字体颜色 */
  border: 0; /* 删除按钮边框 */
  border-radius: 20px; /* 按钮圆角边 */
  background-image: linear-gradient(
    to right,
    #b8cbb8 0%,
    #b8cbb8 0%,
    #b465da 0%,
    #cf6cc9 33%,
    #ee609c 66%,
    #ee609c 100%
  ); /* 按钮颜色 */
}
</style>
 <!--
<style scoped src="../assets/css/iconfont.css">
</style> 